import { styleType } from 'element-plus/es/components/table-v2/src/common';
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';

import HomeView from '../views/HomeView.vue'; // 导入一个组件

// Array说明约束的类型是一个数组
// Array<这里约束的是成员的类型>
const routes: Array<RouteRecordRaw> = [
  {
    path: '/', // path 路径
    name: 'index',
    component: HomeView,
  },
  {
    path: '/list',
    name: 'kfc', // 可以给路由配置进行命名
    // 使用函数import一个组件的方式叫做组件的动态加载
    // 路由的懒加载
    // 这样配置可以在对应的路由匹配的时候才去加载
    component: () => import('@/views/List.vue'),
  },
  {
    path: '/detail',
    name: 'deatil',
    component: () => import('@/views/Detail.vue'),
  },
  {
    // path 可以通过 :参数名的形式来声明动态参数
    // seo友好
    path: '/uc/:b/:a/',
    name: 'uc',
    component: () => import('@/views/Uc.vue'),
  },
  {
    path: '/dis',
    name: 'dis',
    component: () => import('@/views/Dis.vue'),
    children: [
      {
        path: 'pa',
        name: 'pa',
        component: () => import('@/views/Pa.vue'),
      },
      {
        path: 'pb',
        name: 'pb',
        component: () => import('@/views/Pb.vue'),
      },
    ],
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/Login.vue'),
  },
];

const router = createRouter({
  history: createWebHashHistory(), // 路由模式是哈希路由
  routes,
});

// before 在...之前  Each 每一个
// 全局前置守卫
router.beforeEach((to, from) => {
  // console.log('页面跳转之前');
  // console.log('到哪个页面', to);
  // console.log('从哪里开始跳转', from);
  const { name } = to;
  return true;
  if (['login', 'index', 'uc'].includes(<string>name)) return true;
  // return false;
  return { path: '/login', query: { a: 1, b: 2 } };
});

// 全局后置守卫

router.afterEach((to, from) => {
  // ?? 做什么？？？？？
  // 埋点 一般用来做页面的统计 方便记录用户访问了什么页面
  // console.log('to', to);
  // console.log('from', from);
});

export default router;
